<template>
	<article class="page page-seal-generator">
		<h4 class="text-center">印章生成器</h4>
		<form class="page-body">
			<div class="row">
				<div class="col-6 left">
					<fieldset>
						<legend>参数设置</legend>
						<div class="fieldset-content">
							<div class="form-group row-flex" align="center">
								<div class="row-flex-prefix">印章类型</div>
								<div class="row-flex-main">
									<select class="form-control" v-model="sealType">
										<option v-for="(v,i) in sealTypeList" :key="i" :value="v.value">{{v.label}}</option>
									</select>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-6">
									<div class="row-flex" align="center">
										<label class="row-flex-prefix">印章字体</label>
										<div class="row-flex-main">
											<input class="form-control" type="text" v-model.trim="fontFamily" placeholder="请输入系统已安装字体名" />
										</div>
									</div>
								</div>
								<div class="col-6">
									<div class="row-flex" align="center">
										<label class="row-flex-prefix">印章颜色</label>
										<div class="row-flex-main">
											<input class="form-control" type="color" v-model.trim="sealColor" placeholder="请选择印章颜色" style="height: 38px;" />
										</div>
									</div>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-6">
									<div class="row-flex" align="center">
										<label class="row-flex-prefix">印章名称</label>
										<div class="row-flex-main">
											<input class="form-control" type="text" v-model.trim="sealName" placeholder="请输入印章名称" />
										</div>
									</div>
								</div>
								<div class="col-6">
									<div class="row-flex" align="center">
										<label class="row-flex-prefix">名称字号</label>
										<div class="row-flex-main">
											<input class="form-control" type="number" v-model.trim="sealNameSize" placeholder="印章名称字号大小" />
										</div>
									</div>
								</div>
							</div>
							<template v-if="sealType==='official'">
								<div class="form-group row">
									<div class="col-6">
										<div class="row-flex" align="center">
											<div class="row-flex-prefix">公章类型</div>
											<div class="row-flex-main">
												<select class="form-control" v-model="officialType">
													<option v-for="(v,i) in officialTypeList" :key="i" :value="v.value">{{v.label}}</option>
												</select>
											</div>
										</div>
									</div>
									<div class="col-6">
										<div class="row-flex" align="center">
											<div class="row-flex-prefix">类型字号</div>
											<div class="row-flex-main">
												<input class="form-control" type="number" v-model.trim="officialTypeSize" :min="1" placeholder="类型字号" />
											</div>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-6">
										<div class="row-flex" align="center">
											<label class="row-flex-prefix">安全码</label>
											<div class="row-flex-main">
												<input class="form-control" type="text" v-model.trim="sealCode" placeholder="13位防伪码" />
											</div>
										</div>
									</div>
									<div class="col-6">
										<div class="row-flex" align="center">
											<div class="row-flex-prefix">安全字号</div>
											<div class="row-flex-main">
												<input class="form-control" type="number" v-model.trim="sealCodeSize" :min="1" placeholder="安全码字号" />
											</div>
										</div>
									</div>
								</div>
								<div class="form-group row">
									<div class="col-6">
										<div class="row-flex" align="center">
											<label class="row-flex-prefix">圆章半径</label>
											<div class="row-flex-main">
												<input class="form-control" type="number" v-model.trim="sealSize" placeholder="圆章半径" />
											</div>
										</div>
									</div>
									<div class="col-6">
										<div class="row-flex" align="center">
											<div class="row-flex-prefix">有内边线</div>
											<div class="row-flex-main text-left">
												<input type="checkbox" class="form-check-input" v-model="innerLine">
											</div>
										</div>
									</div>
								</div>
							</template>
							<template v-else-if="sealType==='personal'">
								<div class="form-group row-flex" align="center">
									<div class="row-flex-prefix">有边框线</div>
									<div class="row-flex-main text-left">
										<input type="checkbox" class="form-check-input" v-model="borderLine">
									</div>
								</div>
							</template>
							<div class="form-group row-flex" align="center">
								<label class="row-flex-prefix">边框宽度</label>
								<div class="row-flex-main">
									<input class="form-control" type="number" v-model.trim="lineWidth" :min="1" placeholder="边框宽度" />
								</div>
							</div>
							<div class="form-group row-flex" align="center">
								<div class="row-flex-prefix">保存位置</div>
								<div class="row-flex-main"><input class="form-control" type="text" v-model="toPath" /></div>
								<div class="row-flex-suffix"><x-button @click="setToPath">选择...</x-button></div>
							</div>
							<div class="form-group row-flex form-group-main"></div>
							<div class="form-group row-flex">
								<label class="row-flex-prefix"></label>
								<div class="row-flex-main">
									<x-button type="primary" block @click="createHandler">生 成</x-button>
								</div>
							</div>
						</div>
					</fieldset>
				</div>
				<div class="col-6 right">
					<fieldset>
						<legend>生成结果</legend>
						<div class="fieldset-content">
							<div class="form-group form-group-main">
								<canvas :id="id+'_1'" v-if="sealType==='official'" :key="1"></canvas>
								<canvas :id="id+'_2'" v-else-if="sealType==='personal'" :key="2"></canvas>
							</div>
							<div class="form-group">
								<x-button type="primary" block @click="saveHandler" :disabled="!sealObj">下 载</x-button>
							</div>
						</div>
					</fieldset>
				</div>
			</div>
		</form>
	</article>
</template>

<script>
const path = global.require('path')
const {remote} = global.require('electron')
const {dialog} = remote
const selfWindow= remote.getCurrentWindow()
let Seal = global.Seal || null

export default {
	name: 'seal-generator',
	data () {
		return {
			id: 'seal_' + `${Math.random()}`.substring(2),
			sealObj: null,
			sealType: 'official',
			fontFamily: '宋体',
			sealColor: '#e60021',
			sealSize: 75,
			sealName: '请设置印章名称',
			sealNameSize: 18,
			lineWidth: 4,
			officialType: '公司公章',
			officialTypeSize: 16,
			sealCode: '',
			sealCodeSize: 10,
			innerLine: true,
			borderLine: true,
			// 印章类型
			sealTypeList: [
				{label: '公司公章', value: 'official'},
				{label: '个人印章', value: 'personal'},
			],
			// 公章类型
			officialTypeList: [
				{label: '无', value: ''},
				{label: '公司公章', value: '公司公章'},
				{label: '合同专用章', value: '合同专用章'},
			],
			toPath: this.$sharedObject('desktopPath'),
			loadingCount: 0
		}
	},
	methods: {
		// 设置保存位置
		setToPath () {
			let filePaths = dialog.showOpenDialogSync(selfWindow, {
				title: '选择目录',
				buttonLabel:'确定',
				defaultPath: this.$sharedObject('desktopPath'),
				properties: ['openDirectory']
			})
			console.log(filePaths)
			if (filePaths instanceof Array && filePaths.length > 0) {
				this.toPath = filePaths[0]
			}
		},
		// 生成
		createHandler () {
			if (this.sealType === 'official') {
				if (this.sealCode && this.sealCode.length !== 13) {
					this.sealCode = this.sealCode.substring(0, 13).padEnd(13, 0)
				}
				this.sealObj = new Seal.Official(`#${this.id}_1`, {
					name: this.sealName,
					color: this.sealColor,
					radius: this.sealSize,
					lineWidth: this.lineWidth,
					innerLine: this.innerLine,
					type: this.officialType,
					typeFontSize: this.officialTypeSize,
					code: this.sealCode,
					codeFontSize: this.sealCodeSize,
					fontSize: this.sealNameSize,
					fontFamily: this.fontFamily,
				})
			} else if (this.sealType === 'personal') {
				this.sealObj = new Seal.Personal(`#${this.id}_2`, {
					name: this.sealName,
					color: this.sealColor,
					lineWidth: this.lineWidth,
					border: this.borderLine,
					fontSize: this.sealNameSize,
					fontFamily: this.fontFamily,
				})
			}
		},
		// 保存
		saveHandler () {
			if (!this.sealObj) {
				return this.$toast('未发现可保存的图片')
			}
			let filePath = path.join(this.toPath, `${Date.now()}.png`)
			let base64Url = this.sealObj.saveSeal()
			let base64Str = base64Url.replace(/^data:image\/\w+;base64,/, '')
			let dataBuffer = new Buffer(base64Str, 'base64')
			this.loadingCount++
			this.$sharedObject('jstoolsNode').writeFile(filePath, dataBuffer).then(() => {
				this.$toast('下载完成')
			}).catch((err) => {
				this.$toast('下载错误：' + err)
			}).finally(() => {
				this.loadingCount--
			})
		},
	},
}
</script>

<style scoped lang="less">
@import "~@/assets/css/_mixins.less";
@import "~@/assets/css/_color.less";
.page-seal-generator {
	display: flex;
	flex-direction: column;
	fieldset {
		height: 100%;
		.fieldset-content {
			height: calc(100% - 2em);
			display: flex;
			flex-direction: column;
		}
	}
	.page-body {
		height: 0;
		flex-grow: 1;
		& > .row {
			height: 100%;
		}
		.form-group-main {
			height: 0;
			flex-grow: 1;
			overflow: auto;
		}
		.left {
			.row-flex {
				.row-flex-prefix {width: 4.5em; text-align: right;}
				& + .row-flex {
					margin-top: .5em;
				}
			}
		}
		.right {
			canvas {
				display: block;
				margin: auto;
			}
		}
	}
}
</style>
